<template>
  <div class="info">
    <div class="info-content">
      <div class="company-info">
        <a-skeleton v-if="JSON.stringify(companyInfo)=='{}'" />
        <div v-else>
          <a-card :bordered="false">
            <div class="user-base-info flex-between">
              <a-space>
                <strong>{{ companyInfo.companyName }}</strong>
                <span
                  class="font12"
                  :style="{color:$dealDic(auditStatus,companyInfo.auditState,'tagColor')||'grey'}"
                >{{$dealDic(auditStatus,companyInfo.auditState,'label')}}</span>
              </a-space>
              <a-space>
                <a-button v-if="companyInfo.auditState === 0" type="primary" @click="onAudit">审核通过</a-button>
                <a-button v-if="companyInfo.auditState === 0" @click="onRefuse" type="danger">拒绝</a-button>
                <a-button
                  v-if="companyInfo.auditState == 1"
                  type="primary"
                  class="margin-r20"
                  @click="onEdit"
                >编辑</a-button>
              </a-space>
            </div>
          </a-card>
          <a-card :bordered="false" v-if="companyInfo.auditState!=0">
            <p class="section-title">
              <strong>审核信息</strong>
            </p>
            <div class="margin-t20">
              <a-row>
                <a-col :span="8" v-if="companyInfo.auditState!=2">
                  <p>企业简称：{{dealingInfo(companyInfo.companyNickname)}}</p>
                </a-col>
                <a-col :span="8">
                  <p>审核人：系统</p>
                </a-col>
                <a-col :span="8">
                  <p>审核时间：{{$getTime(companyInfo.approvalDate)}}</p>
                </a-col>
                <a-col :span="8" v-if="companyInfo.auditState!=2">
                  <p>推荐人：{{dealingInfo(companyInfo.introducer)}}</p>
                </a-col>
                <a-col :span="8">
                  <p>{{companyInfo.auditState==2?'拒绝原因':'备注'}}：{{dealingInfo(companyInfo.remark)}}</p>
                </a-col>
                <a-col :span="8" v-if="companyInfo.auditState!=2">
                  <p>更新时间：{{$getTime(companyInfo.updateDate)}}</p>
                </a-col>
              </a-row>
            </div>
          </a-card>
          <a-card :bordered="false">
            <p class="section-title">
              <strong>提交人信息</strong>
            </p>
            <div class="margin-t20">
              <a-row>
                <a-col :span="8">
                  <p>真实姓名：{{companyInfo.user?companyInfo.user.realName:'-'}}</p>
                </a-col>
                <a-col :span="8">
                  <p v-if="companyInfo.user">身份证号：{{dealingInfo(companyInfo.user.residentId)}}</p>
                </a-col>
                <a-col :span="8">
                  <p v-if="companyInfo.user">手机号码：{{dealingInfo(companyInfo.user.phone)}}</p>
                </a-col>
                <a-col :span="8" v-if="companyInfo.auditState==0">
                  <p>推荐人：{{dealingInfo(companyInfo.introducer)}}</p>
                </a-col>
              </a-row>
            </div>
          </a-card>
          <a-card :bordered="false">
            <p class="section-title">
              <strong>认证信息</strong>
            </p>
            <div class="margin-t20">
              <a-row>
                <a-col :span="8">
                  <p>
                    企业名称：{{dealingInfo(companyInfo.companyName)}}
                    <a-tag
                      v-if="informationCorrect"
                      :color="$dealDic(dataCorrectOrNot,informationCorrect,'tagColor')"
                    >{{$dealDic(dataCorrectOrNot,informationCorrect,'label')}}</a-tag>
                  </p>
                </a-col>
                <a-col :span="8">
                  <p>
                    统一社会信用代码：{{dealingInfo(companyInfo.creditNum)}}
                    <a-tag
                      v-if="informationCorrect"
                      :color="$dealDic(dataCorrectOrNot,informationCorrect,'tagColor')"
                    >{{$dealDic(dataCorrectOrNot,informationCorrect,'label')}}</a-tag>
                  </p>
                </a-col>
                <a-col :span="8">
                  <p>
                     企业身份：<a-tag
                      v-if="companyInfo.companyDirection"
                      :color="$dealDic(businessIdentity,companyInfo.companyDirection,'tagColor')"
                    >{{$dealDic(businessIdentity,companyInfo.companyDirection,'label')}}</a-tag>
                  </p>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <p>所在城市：{{dealingInfo(companyInfo.companyCityName)}}</p>
                </a-col>
                <a-col :span="8">
                  <p>法人姓名：{{dealingInfo(companyInfo.legalpersonName)}}</p>
                </a-col>
                 <a-col :span="8">
                  <p>法人身份证号：{{dealingInfo(companyInfo.legalpersonId)}}</p>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <p>注册资本：{{dealingInfo(companyInfo.registeredCapital)}} {{companyInfo.registeredCapital?'万元':''}}</p>
                </a-col>
                   <a-col :span="8">
                  <p>商品品种： {{
                  companyInfo.category
                    ? arrayToString(companyInfo.category, "categoryName")
                    : ""
                }}</p>
                </a-col>
              </a-row>
              <a-row>
              
                <a-col :span="8">
                  <div>
                    营业执照：
                    <p
                      v-if="companyInfo.businessLicense"
                      class="img-file flex-center"
                      v-viewer="{ movable: true, title: true }"
                    >
                      <img :src="companyInfo.businessLicense" alt />
                    </p>
                  </div>
                </a-col>
                <a-col :span="8">
                  <div>
                    认证授权书：
                    <p
                      v-if="companyInfo.authorizationFile"
                      class="img-file flex-center"
                      v-viewer="{ movable: true, title: true }"
                    >
                      <img :src="companyInfo.authorizationFile" alt />
                    </p>
                  </div>
                </a-col>
              </a-row>
            </div>
          </a-card>
        </div>
      </div>

      <a-card :bordered="false">
        <a-skeleton v-if="companyQccInfoVisible" />
        <div v-else class="verification">
          <p class="section-title">
            <strong>企业资料核查</strong>
          </p>
          <div class="margin-t20">
            <div class="flex">
              <div class="row">
                <span class="left">注册资本：</span>
                <span>{{ verificationData.registCapi }}</span>
              </div>
              <div class="row">
                <span class="left">实缴资本：</span>
                <span>{{ verificationData.recCap }}</span>
              </div>
            </div>
            <div class="flex">
              <div class="row">
                <span class="left">经营状态：</span>
                <span>{{ verificationData.status }}</span>
              </div>
              <div class="row">
                <span class="left">成立日期：</span>
                <span>{{ verificationData.startDate }}</span>
              </div>
            </div>
            <div class="flex">
              <div class="row">
                <span class="left">注册号：</span>
                <span>{{ verificationData.no }}</span>
              </div>
              <div class="row">
                <span class="left">组织机构代码：</span>
                <span>{{ verificationData.orgNo }}</span>
              </div>
            </div>
            <div class="flex">
              <div class="row">
                <span class="left">纳税人识别号：</span>
                <span>{{ verificationData.creditCode }}</span>
              </div>
              <div class="row">
                <span class="left">统一社会信用代码：</span>
                <span>{{ verificationData.creditCode }}</span>
              </div>
            </div>
            <div class="flex">
              <div class="row">
                <span class="left">企业类型：</span>
                <span>{{ verificationData.econKind }}</span>
              </div>
              <div class="row">
                <span class="left">所属行业：</span>
                <span>{{ verificationData.subIndustry }}</span>
              </div>
            </div>
            <div class="flex">
              <div class="row">
                <span class="left">核准日期：</span>
                <span>{{ verificationData.checkDate }}</span>
              </div>
              <div class="row">
                <span class="left">登记机关：</span>
                <span>{{ verificationData.belongOrg }}</span>
              </div>
            </div>
            <div class="flex">
              <div class="row">
                <span class="left">所属地区：</span>
                <span>{{ verificationData.province }}</span>
              </div>
              <div class="row">
                <span class="left">英文名：</span>
                <span>{{ verificationData.englishName }}</span>
              </div>
            </div>
            <div class="flex">
              <div class="row">
                <span class="left">曾用名：</span>
                <span
                  v-if="
                    !verificationData.originalName ||
                      verificationData.originalName.length == 0
                  "
                >-</span>
                <span
                  v-else
                  v-for="(item, index) in verificationData.originalName"
                  :key="index"
                >{{ item }}</span>
              </div>
              <div class="row">
                <span class="left">经营方式：</span>
                <span>-</span>
              </div>
            </div>
            <div class="flex">
              <div class="row">
                <span class="left">人员规模：</span>
                <span>{{ verificationData.personScope }}</span>
              </div>
              <div class="row">
                <span class="left">企业期限：</span>
                <span>
                  {{
                  verificationData.termEnd
                  ? verificationData.termEnd
                  : "无固定期限"
                  }}
                </span>
              </div>
            </div>

            <div class="flex">
              <span class="left">企业地址：</span>
              <span>{{ verificationData.address }}</span>
            </div>
            <div class="busines-scope">
              <span class="left" style="display:inline-block">经营范围：</span>
              <span class="dec">{{ verificationData.scope }}</span>
            </div>
          </div>
        </div>
      </a-card>
    </div>
    <a-modal
      width="30%"
      :title="currentType == 'pass' ? '审核通过' : '审核拒绝'"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="onOk"
      @cancel="onCancel"
      :destroyOnClose="true"
      center
    >
      <c-form-model
        :datas="currentType == 'pass' ? formPassData : formRefuseData"
        v-model="form"
        :rules="rules"
        ref="formModels"
      >
        <div slot="companyName">
          [
          <span class="colorMain">{{ companyInfo.companyName }}</span>]
          ,确认审核通过。
        </div>
      </c-form-model>
    </a-modal>
    <!-- 编辑弹窗 -->
    <a-drawer
      class="users-drawer"
      title="编辑"
      :width="'30%'"
      :visible="editVisible"
      :body-style="{ paddingBottom: '80px' }"
      @close="onClose"
      :destroyOnClose="true"
    >
      <c-form-model :datas="drawerData" v-model="form" :rules="drawerRules" ref="formModels">
        <a-switch
          slot="isChoicenessSeller"
          size="small"
          slot-scope="row"
          v-model="form[row.tableRow.prop]"
        ></a-switch>
        <div slot="companyCity">
           <City v-model="form.companyCity" />
        </div>
        <div slot="category">
          <c-category
            slot="categoryIds"
            class="select-input"
            v-model="form.categoryIds"
            multiple
          ></c-category>
        </div>
        <div slot="businessLicense" slot-scope="row">
          <p
            class="img-file flex-center"
            v-viewer="{ movable: true, title: true }"
          >
            <img v-if="businessLicense" :src="businessLicenseImgUrl" alt />
            <img v-else :src="form[row.tableRow.prop]" alt />
          </p>
          <p class="img-btn">
            <c-upload
              class="text-align-center"
              type="button"
              @change="uploadBusinessLicenseImg"
              accept="image/png"
              buttonName="立即上传"
              buttonType="primary"
              ghost
            ></c-upload>
          </p>
        </div>
        <div slot="authorizationFile" slot-scope="row">
          <p
            class="img-file flex-center"
            v-viewer="{ movable: true, title: true }"
          >
            <img v-if="authorizationFile" :src="authorizationFileImgUrl" alt />
            <img v-else :src="form[row.tableRow.prop]" alt />
          </p>
          <p class="img-btn">
            <c-upload
              class="text-align-center"
              type="button"
              @change="uploadAuthorizationFileImg"
              accept="image/png"
              buttonName="立即上传"
              buttonType="primary"
              ghost
            ></c-upload>
          </p>
        </div>
      </c-form-model>
      <div class="drawer-footer-btn flex-center">
        <a-button class="margin-r10" @click="onEditClose">取消</a-button>
        <a-button type="primary" @click="onEditOk">确定</a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { objFormData, getIds, arrayToString} from "@/util/common";
import { mapState } from "vuex";
import {
  approveCompany,
  getCompanyQccinfoByName,
  updateCompanyPreauth
} from "@/api/company/companys";
import { businessIdentity } from "@/dict/public";
import { dataCorrectOrNot, auditStatus } from "@/dict/company";
import City from "@/components/City";
import { mapActions } from "vuex";

export default {
  name: "Info",
  props: {
    companyInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  components: {City},
  data() {
    return {
      auditStatus,
      dataCorrectOrNot,
      businessIdentity,
      authorizationFile: '',
      authorizationFileImgUrl: '',
      businessLicense: '',
      businessLicenseImgUrl: '',
      visible: false,
      editVisible: false,
      companyQccInfoVisible: false,
      confirmLoading: false,
      informationCorrect: 1, // 1正确 2错误
      verificationData: {},
      currentType: "pass",
      form: {
        // introducer: "",
        // companyNickname: "",
        // remark: "",
        categoryIds: undefined
      },
      drawerForm: {},
      drawerData: [
        {
          label: "精选卖家",
          prop: "isChoicenessSeller",
          type: "slot"
        }, 
        {
          label: "企业身份",
          prop: "companyDirection",
          type: "radio",
          typeData: businessIdentity
        },
        // {
        //   label: "真实姓名",
        //   prop: "realName",
        //   disabled: true
        // },
        // {
        //   label: "手机号码",
        //   prop: "phone",
        //   disabled: true
        // },
        // {
        //   label: "身份证号",
        //   prop: "residentId",
        //   disabled: true
        // },
        {
          label: "企业简称",
          prop: "companyNickname"
        },
        {
          label: "企业名称",
          prop: "companyName"
        },
        {
          label: "信用代码",
          prop: "creditNum"
        },
        {
          label: "所在城市",
          prop: "companyCity",
          type: 'slot'
        },
        {
          label: "商品品种",
          prop: "category",
          type: 'slot'
        },
        {
          label: "法人姓名",
          prop: "legalpersonName"
        },
        {
          label: "法人身份证号",
          prop: "legalpersonId"
        },
        {
          label: "注册资本(万元)",
          prop: "registeredCapital"
        },
        {
          label: "推荐人",
          prop: "introducer",
          maxLength: 20
        },
        {
          label: "备注",
          prop: "remark",
          type: "textarea",
          maxLength: 100
        },
        {
          label: "营业执照",
          prop: "businessLicense",
          type: "slot"
        },
        {
          label: "认证授权书",
          prop: "authorizationFile",
          type: "slot"
        }
      ],
      // 编辑弹窗输入规则
      drawerRules: {
        companyNickname: [
          { required: true, message: "请输入企业简称", trigger: "blur" }
        ],
        // realName: [ { required: true, message: "请输入真实姓名", trigger: "blur" } ],
        // residentId: [
        //   { required: true, message: "请输入身份证号", trigger: "blur" }
        // ],
        // phone: [
        //   { required: true, message: "请输入手机号码", trigger: "blur" }
        // ],
        companyDirection: [
          { required: true, message: "请选择企业身份", trigger: "blur" }
        ],
        companyName: [
          { required: true, message: "请输入企业名称", trigger: "blur" }
        ],
        creditNum: [
          { required: true, message: "请输入信用代码", trigger: "blur" }
        ],
        legalpersonName: [
          { required: true, message: "请输入法人姓名", trigger: "blur" }
        ],
        legalpersonId: [
          { required: true, message: "请输入法人身份证号", trigger: "blur" }
        ],
        businessLicense: [
          { required: true, message: "请上传营业执照", trigger: "blur" }
        ],
        authorizationFile: [
          { required: true, message: "请上传认证授权书", trigger: "blur" }
        ]
      },
      //审核通过
      formPassData: [
        {
          label: "企业名称",
          prop: "companyName",
          type: "slot"
        },
        {
          label: "企业简称",
          prop: "companyNickname",
          maxLength: 8
        },
        {
          label: "推荐人",
          prop: "introducer",
          maxLength: 20
        },
        {
          label: "备注",
          prop: "remark",
          type: "textarea",
          maxLength: 10
        }
      ],
      //审核拒绝
      formRefuseData: [
        {
          label: "拒绝理由",
          prop: "remark",
          type: "textarea"
        }
      ],
      rules: {
        companyNickname: [
          { required: true, message: "请输入企业简称", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getCompanyQccInfo();
    this.getCategoryList();
  },
  mounted() {},
  methods: {
    arrayToString,
     ...mapActions([ "getCategoryList" ]),
    dealingInfo(i) {
      return i ? i : "-";
    },
    //获取企业资料核查数据
    getCompanyQccInfo() {
      this.companyQccInfoVisible = true;
      getCompanyQccinfoByName({
        companyName: this.$route.query.companyName
      })
        .then(res => {
          res.data == {}
            ? (this.informationCorrect = 2)
            : (this.informationCorrect = 1);
          this.verificationData = res.data;
          this.companyQccInfoVisible = false;
        })
        .catch(() => {});
    },
    //上传图片
    uploadAuthorizationFileImg(file) {
       this.authorizationFile = file;
       this.authorizationFileImgUrl = URL.createObjectURL(file);
    },
    //上传图片
    uploadBusinessLicenseImg(file) {
       this.businessLicense = file;
       this.businessLicenseImgUrl = URL.createObjectURL(file);
    },
    onOk() {
      const that = this;
      this.$refs.formModels.handleValidate().then(data => {
        that.confirmLoading = true;
        let parmas = {};
        if (this.currentType == "pass") {
          parmas = {
            companyPreauthId: this.$route.query.id,
            auditState: 1,
            companyNickname: that.form.companyNickname,
            introducer: that.form.introducer,
            remark: that.form.remark
          };
        } else {
          parmas = {
            companyPreauthId: this.$route.query.id,
            auditState: 2,
            remark: that.form.remark
          };
        }
        approveCompany(parmas)
          .then(res => {
            that.$message.success("操作成功");
            that.$emit('initPage')
            that.confirmLoading = false;
            that.visible = false;
            that.getCompanyQccInfo();
          })
          .catch(() => {
            that.$emit('initPage')
            that.confirmLoading = false;
            that.visible = false;
          });
      });
    },
    //编辑弹窗提交
    onEditOk(){
      let that = this
       this.$refs.formModels.handleValidate().then(data => {
        let parmas = {
          preAuthId: data.id, //是	Long	企业认证id
          companyNickname: data.companyNickname, //	是	String	企业简称
          companyName: data.companyName,	//是	String	企业名称
          creditNum: data.creditNum, //是	String	信用代码
          registeredCapital: data.registeredCapital, //	否	Decimal	注册资本
          companyDirection: data.companyDirection, //	是	String	买卖方向 1:买家 2:卖家 3:买卖家
          companyCity: data.companyCity?(data.companyCity.length==0?'':data.companyCity[1]):'', //	是	String	城市
          legalpersonName: data.legalpersonName, //是	String	法人姓名
          legalpersonId: data.legalpersonId, //是	String	法人身份证号码
          isChoicenessSeller: data.isChoicenessSeller, //是	Boolean	精选卖家 false:否 true: 是
          introducer: data.introducer, //	否	String	推荐人
          remark: data.remark, //否	String	备注
          categorys: data.categoryIds, //否	Long[]	交易品种
          businessLicense: that.businessLicense, //	否	MultipartFile	营业执照
          authorizationFile: that.authorizationFile //	否	MultipartFile	授权书
        };
       parmas = objFormData(parmas)
        updateCompanyPreauth(parmas)
          .then(res => {
             that.$emit('initPage')
             that.editVisible = false;
          })
          .catch(() => {
          });
      });
     
    },
    onEditClose(){
      this.editVisible = false;
    },
    onAudit() {
      this.visible = true;
      this.currentType = "pass";
    },
    onCancel() {
      this.visible = false;
    },
    onEdit() {
      this.form = JSON.parse(JSON.stringify(this.companyInfo));
      this.form.realName = this.companyInfo.user.realName;
      if(this.companyInfo.companyCity){
        this.form.companyCity = [ '', this.companyInfo.companyCity ];
      }
      this.form.residentId = this.companyInfo.user.residentId;
      this.form.phone = this.companyInfo.user.phone;
      this.form.categoryIds = getIds(this.companyInfo.category, "id")
      this.editVisible = true;
      
    },
    onClose() {
      this.editVisible = false;
    },
    onRefuse() {
      this.visible = true;
      this.currentType = "refuse";
    }
    
  }
};
</script>

<style lang="less" scoped>
.img-file {
  height: 120px;
  margin-bottom: 0;
  width: 120px;
  img {
    width: 90%;
    height: 90%;
    border: 1px solid #eee;
  }
}
.img-btn{
  width: 120px;
}
.info {
  .section-title {
    font-size: 14px;
  }
  .verification {
    min-width: 1000px;
    .flex {
      border-bottom: 1px solid #e7f6ff;
    }
    .row {
      min-width: 500px;
    }
    span {
      margin-bottom: 0;
      padding: 10px;
      display: inline-block;
    }
    .left {
      width: 150px;
      background: #e7f6ff;
      text-align: right;
    }
  }
  .busines-scope {
    border-bottom: 1px solid #e7f6ff;
    display: flex;
    width: 100%;
    .left {
      width: 150px !important;
      display: inline-block;
      vertical-align: center;
    }
    .dec {
      width:800px;
    }
  }
}

::v-deep.ant-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
  margin-top: 10px;
}
</style>
